<template>
  <a-form layout="inline" style="margin-bottom: 20px;">
    <a-form-item>
      <a-input v-model:value="listParm.name" placeholder="请输入用户名"></a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="listParm.phone" placeholder="请输入手机号"></a-input>
    </a-form-item>
    <a-button style="margin-right: 15px;" @click="searchBtn">
      <template #icon>
        <search-outlined />
      </template>
      搜索
    </a-button>
    <a-button style="margin-right: 15px;" type="primary" danger @click="resetBtn">
      <template #icon>
        <close-outlined />
      </template>
      重置
    </a-button>
    <a-button style="margin-right: 15px;" type="primary" @click="addBtn">
      <template #icon>
        <plus-outlined />
      </template>
      新增
    </a-button>
  </a-form>
  <!-- 表格 -->
  <a-table
      :scroll="{ y: tableHeight }"
      :pagination="page"
      :dataSource="tableList.list"
      :columns="columns"
      bordered
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'sex'">
        <a-tag color="red" v-if="record.sex === '0'">男</a-tag>
        <a-tag color="blue" v-else>女</a-tag>
      </template>
      <template v-if="column.key === 'action'">
        <a-button @click="editBtn(record)" style="margin-right: 15px;" type="primary">
          <template #icon>
            <edit-outlined />
          </template>
          编辑
        </a-button>
        <a-button @click="deleteBtn(record)" type="primary" danger>
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </template>
    </template>
  </a-table>
  <!-- 弹框组件 -->
  <add-user ref="addRef" @refresh="refresh"></add-user>
</template>

<script setup lang='ts'>
import useUser from '@/composable/user/useUser'
import AddUser from "@/views/system/user/component/AddUser.vue";
import useTable from "@/composable/user/useTable";
const {tableHeight,tableList,listParm,getList,page,columns,searchBtn,resetBtn,refresh} = useTable()
//用户操作
const { addRef, addBtn, editBtn, deleteBtn } = useUser(getList)
</script>
<style scoped lang='scss'>
</style>
